<template>
    <div>
        <el-collapse-item title="- 文字信息" :name="props.id">
            <ul class="editorformTable" border="1" bordercolor="#ffffff" cellspacing="0" cellpadding="0">
                <li class="editorformItem">
                    <div class="editorformItemName">文字内容</div>
                    <div class="editorformItemFunc">
                        <el-input v-model="style.text" @input="change('text', style.text)" class="editorforminput" placeholder="请输入文字内容" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">字体</div>
                    <div class="editorformItemFunc">
                        <el-select v-model="style.font_family" class="editorforminput" @change="change('font_family', style.font_family)">
                            <el-option v-for="opt in fontFamily" :key="opt.value" :label="opt.label" :value="opt.value" />
                        </el-select>
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">字体大小</div>
                    <div class="editorformItemFunc">
                        <el-input-number
                            v-model="style.font_size"
                            @input="change('font_size', style.font_size)"
                            class="editorforminput"
                            :step="1"
                            conliols-position="right"
                            :min="10"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">是否加粗</div>
                    <div class="editorformItemFunc">
                        <el-switch
                            v-model="style.font_weight"
                            @change="change('font_weight', style.font_weight)"
                            active-value="bold"
                            inactive-value="normal"
                            style="--el-switch-on-color: rgba(32, 160, 255)"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">是否斜体</div>
                    <div class="editorformItemFunc">
                        <el-switch
                            v-model="style.font_style"
                            @change="change('font_style', style.font_style)"
                            active-value="italic"
                            inactive-value="normal"
                            style="--el-switch-on-color: rgba(32, 160, 255)"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">颜色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker
                            :predefine="global.defaultColor"
                            @change="change('color', style.color)"
                            show-alpha
                            class="editorforminput"
                            v-model="style.color"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">是否衬色</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.outline" @change="change('outline', style.outline)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <li class="editorformItem" v-if="style.outline">
                    <div class="editorformItemName">衬色颜色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker
                            :predefine="global.defaultColor"
                            @change="change('outlineColor', style.outlineColor)"
                            show-alpha
                            class="editorforminput"
                            v-model="style.outlineColor"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">是否背景</div>
                    <div class="editorformItemFunc">
                        <el-switch
                            v-model="style.background"
                            @change="change('background', style.background)"
                            style="--el-switch-on-color: rgba(32, 160, 255)"
                        />
                    </div>
                </li>
                <li class="editorformItem" v-if="style.background">
                    <div class="editorformItemName">背景颜色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker
                            :predefine="global.defaultColor"
                            @change="change('backgroundColor', style.backgroundColor)"
                            show-alpha
                            class="editorforminput"
                            v-model="style.backgroundColor"
                        />
                    </div>
                </li>
            </ul>
        </el-collapse-item>
    </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import global from "@/utils/global.data.params";
interface Props {
    id?: any; // 默认值
    graphic?: any;
    texture?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
    graphic: {},
    texture: false,
    id: "",
});
const style: any = reactive(props.graphic.style);
const change = (opt: string, val: any) => {
    setTimeout(() => {
        switch (opt) {
            case "text":
                props.graphic.setStyle({ text: val });
                break;
            case "font_family":
                props.graphic.setStyle({ font_family: val });
                break;
            case "font_size":
                props.graphic.setStyle({ font_size: val });
                break;
            case "font_weight":
                props.graphic.setStyle({ font_weight: val });
                break;
            case "font_style":
                props.graphic.setStyle({ font_style: val });
                break;
            case "color":
                props.graphic.setStyle({ color: val });
                break;
            case "outline":
                props.graphic.setStyle({ outline: val });
                break;
            case "outlineColor":
                props.graphic.setStyle({ outlineColor: val });
                break;
            case "background":
                props.graphic.setStyle({ background: val });
                break;
            case "backgroundColor":
                props.graphic.setStyle({ backgroundColor: val });
                break;
            default:
                props.graphic.setStyle(style);
        }
        // props.graphic.setStyle(style);
    }, 100);
};
const fontFamily: any = reactive([
    {
        label: "宋体",
        value: "宋体",
    },
    {
        label: "微软雅黑",
        value: "微软雅黑",
    },
    {
        label: "楷体",
        value: "楷体",
    },
    {
        label: "隶书",
        value: "隶书",
    },
    {
        label: "黑体",
        value: "黑体",
    },
]);
</script>
